<template>
  <section>
    <div class="container">
      <div class="left_item">
        <el-card shadow="never">
          <cm-scroll>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            ></el-input>
            <el-tree
              class="filter-tree"
              :data="WorkGroupTree"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              style="height:670px"
              highlight-current
              @node-click="handleNodeClick"
              :expand-on-click-node="false"
            >
            </el-tree>
          </cm-scroll>
        </el-card>
      </div>
      <div class="right_item">
        <el-card shadow="never">
          <el-form
            v-if="formInfo.type == 'org'"
            ref="newMenu"
            :model="workGroupDetail"
            label-width="120px"
          >
            <el-form-item label="名称:" prop="name">
              <el-input
                style="width:400px"
                v-model="workGroupDetail.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="type">
              <el-input
                style="width:400px"
                disabled
                :value="
                  workGroupDetail.type == 'PERSONAL'
                    ? '个人工作组'
                    : '系统工作组'
                "
              ></el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input-number
                size="large"
                v-model="workGroupDetail.sort"
                :min="0"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button @click="newGroup" type="primary">新增工作组</el-button>
              <user-select
                style="display: inline-block;padding:0 10px"
                :func-submit="userSubmit"
                isMulSelect
                :btnLabel="btn"
                isHiddenInput
                @getUser="getUser"
              ></user-select>
              <el-button @click="saveDetail" type="primary">保存</el-button>
              <el-button @click="deleted" type="danger">删除</el-button>
            </el-form-item>
          </el-form>
          <el-form
            v-if="formInfo.type == 'user'"
            ref="newMenu"
            :model="userDetail"
            label-width="120px"
          >
            <el-form-item label="姓名:" prop="name">
              <el-input
                style="width:400px"
                disabled
                v-model="userDetail.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机:" prop="mobile">
              <el-input
                style="width:400px"
                disabled
                v-model="userDetail.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="deletedUser" type="danger">删除</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
    <el-dialog
      width="700px"
      @close="fail"
      title="新增工作组:"
      :visible.sync="newGroupStatus"
      v-if="newGroupStatus"
    >
      <el-row>
        <el-col :span="24" style="padding-right: 10px">
          <el-form
            ref="formGroup"
            :model="formGroup"
            :gutter="10"
            :rules="rules"
            label-width="110px"
          >
            <el-form-item label="工作组名称:" prop="name">
              <el-input
                placeholder="请输入工作组名称"
                v-model="formGroup.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="上级:" prop="parentId">
              <el-cascader
                :show-all-levels="false"
                :options="rootMenus"
                v-model="formGroup.parentId"
                :props="setProperty"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input-number
                size="large"
                v-model="formGroup.sort"
                :min="0"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer">
        <el-button @click="save" type="primary">确定</el-button>
        <el-button @click="fail">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  import _ from "lodash";
  import {mapGetters} from "vuex";
  import userSelect from "@/components/user-select.vue";

  export default {
    name: "workGroup",
    created() {
      this.getWorkGroup();
      this.getWorkGroup1();
    },
    components: {
      userSelect
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    computed: {
      ...mapGetters({
        userDetail: "userDetail"
      }),
      rootMenus() {
        let tem = _.cloneDeep(this.WorkGroupTree1);
        tem.unshift({origId: 0, name: "根节点"});
        return tem;
      }
    },
    data() {
      return {
        btn: "选择人员",
        setProperty: {
          children: "children",
          label: "name",
          checkStrictly: true,
          value: "origId"
        },
        formGroup: {
          id: "",
          name: "",
          sort: "",
          parentId: "",
          type: "SYSTEM"
        },
        formInfoId: [],
        newGroupStatus: false,
        workGroupDetail: {},
        WorkGroupTree: [],
        WorkGroupTree1: [],
        filterText: "",
        defaultProps: {
          children: "children",
          label: "name"
        },
        formInfo: "",
        rules: {
          name: [{required: true, message: "请输入姓名", trigger: "blur"}],
          parentId: [{required: true, message: "请输入上级", trigger: "blur"}],
          sort: [{required: true, message: "请输入排序", trigger: "blur"}]
        }
      };
    },
    methods: {
      getUser(obj) {
        this.formInfoId = obj.uuid;
      },
      // 选人员
      userSubmit() {
        let orgUserUqIds = this.formInfoId;
        let workGroupId = this.workGroupDetail.id;
        let tem = {
          workGroupId,
          orgUserUqIds
        };
        this.API.grantWorkGroup({body: tem}).then(() => {
          this.success("添加成功");
          this.getWorkGroup();
        });
      },
      //获取工作组tree
      getWorkGroup() {
        let tem = {parentId: 0, type: 1, isMe: 0,uStatus:"ALL"};
        this.API.getWorkGroupTree(tem).then(ret => {
          this.WorkGroupTree = ret.data;
          //默认选中第一个
          if (this.WorkGroupTree.length > 0) {
            this.$nextTick().then(() => {
              const firstNode = document.querySelector(".el-tree-node");
              firstNode.click();
            });
          }
        });
      },
      //获取工作组tree(不带用户)
      getWorkGroup1() {
        let tem = {parentId: 0, type: 0, isMe: 0,uStatus:"ALL"};
        this.API.getWorkGroupTree(tem).then(ret => {
          this.WorkGroupTree1 = ret.data;
        });
      },
      //获取工作组详情
      getWorkGroupDetail(val) {
        this.API.getWorkGroupById({id: val}).then(ret => {
          this.workGroupDetail = ret.data;
        });
      },
      //tree点击事件
      handleNodeClick(val) {
        this.formInfo = val;
        // console.log(val)
        switch (val.type) {
          case "user":
            this.getDetail(val.origId);
            break;
          case "org":
            this.getWorkGroupDetail(val.origId);
            break;
        }
      },
      //tree过滤
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      //新增工作组弹窗
      newGroup() {
        // window.print()
        this.formGroup.parentId = this.formInfo.origId;
        this.newGroupStatus = true;
      },
      //确定新增工作组
      save() {
        if (Array.isArray(this.formGroup.parentId)) {
          this.formGroup.parentId =
            this.formGroup.parentId === null
              ? 0
              : this.formGroup.parentId[this.formGroup.parentId.length - 1];
        }
        this.$refs["formGroup"].validate(valid => {
          if (valid) {
            this.API.addOrUpdateWorkGroup({body: this.formGroup}).then(() => {
              this.success("新增成功");
              this.getWorkGroup();
              this.fail();
            });
          } else {
            return false;
          }
        });
      },
      //取消
      fail() {
        this.newGroupStatus = false;
        this.formGroup = {
          name: "",
          sort: "",
          parentId: "",
          type: "SYSTEM"
        };
      },
      //删除工作组
      deleted() {
        this.$confirm("确定删除当前工作组？", "提示", {})
          .then(() => {
            let id = this.workGroupDetail.id;
            this.API.deleteWorkGroupById({id: id}).then(() => {
              this.success("删除成功");
              this.getWorkGroup();
            });
          })
          .catch(() => {
          });
      },
      //修改信息
      saveDetail() {
        this.API.addOrUpdateWorkGroup({
          body: this.workGroupDetail
        }).then(() => {
          this.success("保存成功");
          this.getWorkGroup();
        });
      },
      //获取用户详情
      getDetail(val) {
        this.$store.dispatch("getUserDetail", {userId: val});
      },

      //删除工作组用户关联
      deletedUser() {
        this.$confirm("确定要删除当前用户？", "提示", {})
          .then(() => {
            let tem = {
              userId: this.formInfo.origId,
              workId: this.formInfo.pid
            };
            this.API.deleteWorkGroupUser(tem).then(() => {
              this.success("删除成功");
              this.getWorkGroup();
            });
          })
          .catch(() => {
          });
      }
    }
  };
</script>
<style scoped lang="less">
  .container {
    display: flex;
    float: left;
    width: 100%;
    justify-content: space-between;
  }

  .left_item {
    width: 270px;
  }

  .right_item {
    width: calc(100% - 280px)
  }
</style>
